<template>
    <div>
        <van-nav-bar
                @click-left="$router.replace('/profile')"
                title="登录" left-text="返回" left-arrow>
        </van-nav-bar>
        <van-tabs v-model="active">
            <van-tab title="登录">
                <van-form @submit="loginSubmit" :model="loginForm">
                    <van-field
                            v-model="loginForm.username"
                            name="学号"
                            label="学号"
                            placeholder="学号"
                            :rules="[{ required: true, message: '请填写学号' }]"
                    />
                    <van-field
                            v-model="loginForm.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="display: flex">

                    <van-field
                            style="width: 200px"
                            v-model="loginForm.code"
                            type="text"
                            name="验证码"
                            label="验证码"
                            placeholder="验证码"
                            :rules="[{ required: true, message: '请填写验证码' }]"
                    />
                    <img :src="codeUrl" @click="updateVerifyCode" style="width: 100px; height: 30px;margin-top: 10px" />

                    </div>

                    <div style="margin: 16px;">
                        <van-button @click="loginSubmit" round block type="info" native-type="submit">
                            登录
                        </van-button>
                    </div>
                </van-form>
            </van-tab>
            <van-tab title="注册">
                <van-form @submit="registrySubmit" :model="registryForm">
                    <van-field
                            v-model="registryForm.studentNo"
                            name="学号"
                            label="学号"
                            placeholder="学号"
                            :rules="[{ required: true, message: '请填写学号' }]"
                    />
                    <van-field
                            v-model="registryForm.studentName"
                            name="姓名"
                            label="姓名"
                            placeholder="姓名"
                            :rules="[{ required: true, message: '请填写姓名' }]"
                    />
                    <van-field
                            v-model="registryForm.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                    />

                    <van-field
                            v-model="registryForm.instituteId"
                            readonly
                            clickable
                            name="picker"
                            :value="value"
                            label="学院"
                            :placeholder="placeholder"
                            @click="showPicker = true"
                    />
                    <van-popup v-model="showPicker" position="bottom">
                        <van-picker
                                show-toolbar
                                :columns="insituteColumns"
                                @confirm="onConfirm"
                                @cancel="showPicker = false"
                        />
                    </van-popup>

                    <van-field
                            v-model="registryForm.className"
                            name="班级"
                            label="班级"
                            placeholder="班级"
                            :rules="[{ required: true, message: '请填写班级' }]"
                    />
                    <van-field
                            v-model="registryForm.major"
                            name="专业"
                            label="专业"
                            placeholder="专业"
                            :rules="[{ required: true, message: '请填写专业' }]"
                    />

                    <van-field name="radio" label="年级">
                        <template #input>
                            <van-radio-group v-model="registryForm.grade" direction="horizontal" style="font-size: 9px">
                                <van-radio name="大一">大一</van-radio>
                                <van-radio name="大二">大二</van-radio>
                                <van-radio name="大三">大三</van-radio>
                                <van-radio name="大四">大四</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                            v-model="registryForm.telephone"
                            name="电话号码"
                            label="班级"
                            placeholder="电话号码"
                            :rules="[{ required: true, message: '请填写电话号码' }]"
                    />
                    <van-field
                            v-model="registryForm.email"
                            name="邮箱"
                            label="邮箱"
                            placeholder="邮箱"
                            :rules="[{ required: true, message: '请填写邮箱' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button @click="registrySubmit" round block type="info" native-type="submit">
                            注册
                        </van-button>
                    </div>
                </van-form>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "Login",
        data() {
            return{
                codeUrl: '/verifyCode?time=' + new Date(),
                institutes: [],
                loginForm: {
                    username: 'admin',
                    password: '123',
                    code: ''
                },
                registryForm: {
                    studentNo: '',
                    studentName: '',
                    password: '',
                    instituteId: '',
                    className: '',
                    major: '',
                    grade: '',
                    telephone: '',
                    email: '',
                },
                value: '',
                insituteColumns: [],
                showPicker: false,
                placeholder: '请选择学院',
            }
        },
        mounted() {
            this.initData()
            if (window.sessionStorage.getItem('user')) {
                this.online = true
                this.active = 1
            }
        },
        methods: {
            updateVerifyCode() {
                this.codeUrl = '/verifyCode?time=' + new Date()
            },
            onConfirm(value, index) {
                console.log(`当前值：${value}, 当前索引：${index}`);
                this.showPicker = false
                this.placeholder = value
                //提交的是registryForm.instituteId
                this.registryForm.instituteId = index
            },
            onConfirm2(value2, index) {
                console.log(`当前值：${value2}, 当前索引：${index}`);
                this.showPicker = false
                this.placeholder2 = value2
            },
            onChange(picker, value, index) {
                console.log(`当前值：${value}, 当前索引：${index}`);
            },
            onCancel() {
                console.log('取消');
            },
            initData() {
                this.getRequest('/student/registry/institutes').then(res => {
                    if (res) {
                        //先循环 才能取到值放入 van-popup 把res[i].instituteName数组放入insituteColumns 在vant中不要
                        // 用多个van-popup 不管怎样下边的van-popup总会赋值到上边
                        for (let i=0; i < res.length; i++) {
                            console.log(res[i].instituteName)
                            this.insituteColumns.push(res[i].instituteName)
                        }
                        console.log(this.insituteColumns)
                    }
                })
            },
            loginSubmit() {
                this.postKeyValueRequest('/doLogin', this.loginForm).then(res => {
                    if (res) {
                        if (res.status === 200) {
                            window.sessionStorage.setItem("user", JSON.stringify(res.obj))
                            let path = this.$route.query.redirect //获取用户想发的请求地址
                            this.$router.replace((path === '/' || path === undefined) ? '/profile' : path)
                        }
                        this.codeUrl = '/verifyCode?time=' + new Date()
                    }
                    this.codeUrl = '/verifyCode?time=' + new Date()
                })
            },
            registrySubmit() {
                this.postRequest("/student/registry/", this.registryForm).then(res => {
                    if (res) {
                        this.registryForm = ''
                        this.$router.replace('/profile')
                    }
                })
            }
        },

    }
</script>

<style scoped>

</style>
